<template>
  <div class="login">
    <p>
      <span> T </span>
      <span> I </span>
      <span> M </span>
    </p>
    <form action="">
      <label for="email">
        <i class="iconfont icon-185078emailmailstreamline"></i>
        <input
          autocomplete="off"
          id="email"
          type="email"
          v-model="FormData.email"
          placeholder="email length 4~20"
        />
      </label>
      <label for="password">
        <i class="iconfont icon-password"></i>
        <input
          autocomplete="off"
          id="password"
          type="password"
          v-model="FormData.password"
          placeholder="password length 4~20"
        />
      </label>
      <button @click="Login">submit</button>
    </form>
  </div>
</template>

<script>
const THREE = require("../../tool/three.min.js");

import { getLogin } from "@/api/data";

export default {
  data() {
    return {
      FormData: {
        email: "",
        password: "",
        socketid: "",
      },
    };
  },
  async created() {
    // 检查本地是否有登陆记录，实现自动登陆
    let userdata = JSON.parse(localStorage.getItem("userdata"));
    if (userdata != null) {
      // 提交登陆，并通知所有人自己上线
      userdata.socketid = this.$socket.id;
      let data = await getLogin(userdata);
      if (data.code == 200) {
        sessionStorage.setItem("userdata", JSON.stringify(data.data));

        // 将用户信息存到本地，下次直接登陆
        localStorage.setItem("userdata", JSON.stringify(data.data));
        this.$store.commit("setuserdata", data.data);
        this.$router.push("/message");
      } else {
        alert(data.msg);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      var SCREEN_WIDTH = window.innerWidth,
        SCREEN_HEIGHT = window.innerHeight,
        r = 200,
        mouseX = 0,
        mouseY = 0,
        windowHalfX = window.innerWidth / 2,
        windowHalfY = window.innerHeight / 2,
        camera,
        scene,
        renderer;

      init();

      animate();

      function init() {
        var container;

        container = document.createElement("div");

        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(
          80,
          SCREEN_WIDTH / SCREEN_HEIGHT,
          1,
          3000
        );

        camera.position.z = 1000;

        scene = new THREE.Scene();

        var i,
          line,
          vertex1,
          vertex2,
          material,
          p,
          parameters = [[3.5, 0x90cebf, 0.5, 1]],
          geometry = new THREE.Geometry();

        for (i = 0; i < 1500; i++) {
          var vertex1 = new THREE.Vector3();

          vertex1.x = Math.random() * 2 - 1;

          vertex1.y = Math.random() * 2 - 1;

          vertex1.z = Math.random() * 2 - 1;

          vertex1.normalize();

          vertex1.multiplyScalar(r);

          vertex2 = vertex1.clone();

          vertex2.multiplyScalar(Math.random() * 0.09 + 1);

          geometry.vertices.push(vertex1);

          geometry.vertices.push(vertex2);
        }

        for (i = 0; i < parameters.length; ++i) {
          p = parameters[i];

          material = new THREE.LineBasicMaterial({
            color: p[1],
            opacity: p[2],
            linewidth: p[3],
          });

          line = new THREE.Line(geometry, material, THREE.LinePieces);

          line.scale.x = line.scale.y = line.scale.z = p[0];

          line.originalScale = p[0];

          line.rotation.y = Math.random() * Math.PI;

          line.updateMatrix();

          scene.add(line);
        }

        renderer = new THREE.WebGLRenderer({
          antialias: true,
        });

        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

        container.appendChild(renderer.domElement);

        document.addEventListener("mousemove", onDocumentMouseMove, false);

        document.addEventListener("touchstart", onDocumentTouchStart, false);

        document.addEventListener("touchmove", onDocumentTouchMove, false);

        //

        window.addEventListener("resize", onWindowResize, false);
      }

      function onWindowResize() {
        windowHalfX = window.innerWidth / 2;

        windowHalfY = window.innerHeight / 2;

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
      }

      function onDocumentMouseMove(event) {
        mouseX = event.clientX - windowHalfX;

        mouseY = event.clientY - windowHalfY;
      }

      function onDocumentTouchStart(event) {
        if (event.touches.length > 1) {
          event.preventDefault();

          mouseX = event.touches[0].pageX - windowHalfX;

          mouseY = event.touches[0].pageY - windowHalfY;
        }
      }

      function onDocumentTouchMove(event) {
        if (event.touches.length == 1) {
          event.preventDefault();

          mouseX = event.touches[0].pageX - windowHalfX;

          mouseY = event.touches[0].pageY - windowHalfY;
        }
      }

      //

      function animate() {
        requestAnimationFrame(animate);

        render();
      }

      //   this.$("p").addClass("animate__animated animate__slideInDown tra");

      function render() {
        camera.position.y += (-mouseY + 200 - camera.position.y) * 0.05;

        camera.lookAt(scene.position);

        renderer.render(scene, camera);

        var time = Date.now() * 0.0001;

        for (var i = 0; i < scene.children.length; i++) {
          var object = scene.children[i];

          if (object instanceof THREE.Line) {
            object.rotation.y = time * (i < 4 ? i + 1 : -(i + 1));
          }
        }
      }
    });
  },
  methods: {
    async Login() {
      if (
        this.FormData.email.trim().length > 4 &&
        this.FormData.email.trim().length < 20
      ) {
        if (
          this.FormData.password.trim().length > 4 &&
          this.FormData.password.trim().length < 20
        ) {
          // 提交登陆，并通知所有人自己上线
          this.FormData.socketid = this.$socket.id;
          let data = await getLogin(this.FormData);
          if (data.code == 200) {
            sessionStorage.setItem("userdata", JSON.stringify(data.data));

            // 将用户信息存到本地，下次直接登陆
            localStorage.setItem("userdata", JSON.stringify(data.data));
            this.$store.commit("setuserdata", data.data);
            this.$router.push("/message");
          } else {
            alert(data.msg);
          }
        } else {
          alert("密码长度在4~20之间");
        }
      } else {
        alert("邮箱长度在4~20之间");
      }
    },
  },
};
</script>

<style lang='less' scoped>
.login {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  P {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translate(-50%, 0) !important;
    z-index: 999;
    color: #fff;

    span {
      position: relative;
      top: -150px;
      font-size: 0.35rem;
      font-weight: 600;
      text-shadow: 0.05rem 0.05rem 0.05rem #789;
      &:nth-of-type(1) {
        animation: a1 1.5s;
        animation-fill-mode: both;
      }
      &:nth-of-type(2) {
        animation: a1 1.5s 0.5s;
        animation-fill-mode: both;
      }
      &:nth-of-type(3) {
        animation: a1 1.5s 1s;
        animation-fill-mode: both;
      }
    }
  }

  form {
    border: 0.01rem solid #333;
    border-radius: 0.03rem;
    box-shadow: 0rem 0rem 0.1rem #777;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.2rem 0.3rem;
    width: 70vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    label {
      position: relative;
      i {
        position: absolute;
        left: 0.1rem;
        top: 0.09rem;
        color: rgb(197, 14, 14);
      }
      input {
        padding-left: 0.35rem;
        background: none;
        box-shadow: 0rem 0rem 0.05rem #555;
        color: #f0f0f0;
        background-color: rgba(0, 0, 0, 0);
        border: none;
        outline: none;
        width: 100%;
        height: 0.35rem;
        border-radius: 0.03rem;
        margin-bottom: 0.2rem;
        &:focus {
          color: #f0f0f0;
          border: 0.01rem solid #777;
          background: none;
        }
        &:blur {
          color: #f0f0f0;
          border: 0.01rem solid #777;
          background: none;
        }
      }
    }

    button {
      box-shadow: 0rem 0rem 0.05rem #777;
      height: 0.35rem;
      border-radius: 0.03rem;
      background-color: rgba(0, 0, 0, 0.5);
      border: none;
      color: #fff;
      &:hover {
        background-color: #369;
        color: #777;
      }
    }
  }
}

@keyframes a1 {
  0% {
    top: -150px;
  }

  95% {
    top: 0px;
    transform: scale(1);
  }
  98% {
    top: 0px;
    transform: scale(3);
  }
  100% {
    top: 0px;
    transform: scale(1);
  }
}
</style>